<template>
  <div id="Detail">
    <!-- 顶部详情导航 -->
    <detail-nav-bar></detail-nav-bar>
    <!-- 详情页轮播图 -->
    <myswiper></myswiper>
    <!-- 商品基本信息 -->
    <detail-base-info :goods="goods"></detail-base-info>
    <!-- 店铺信息 -->
    <detail-shop-info :shop="shopInfo"></detail-shop-info>
    <!-- 图片展示 -->
    <detail-goods-info :detailInfo="detailInfo"></detail-goods-info>
    <!-- 尺码信息 -->
    <detail-comment-info :paramInfo="paramInfo"></detail-comment-info>
    <!-- 推荐 -->
    <goods-list :goods="recommends"></goods-list>
  </div>
</template>

<script>
// swiper
import Myswiper from "./childComps/myswiper.vue";

import DetailNavBar from "@/views/detail/childComps/DetailNavBar";
// 商品信息
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
// 店铺信息
import DetailShopInfo from "./childComps/DetailShopInfo.vue";
// 图片展示
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
// 尺码信息
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue";
//推荐
import GoodsList from "./childComps/GoodsList.vue";
import {
  getDetail,
  Goods,
  GoodsParam,
  getRecommend,
} from "../../network/detail";
export default {
  name: "Detail",
  data() {
    return {
      goods: {},
      iid: null,
      shopInfo: {},
      detailInfo: {},
      paramInfo: {},
      recommends: {},
    };
  },
  components: {
    DetailNavBar,
    Myswiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailCommentInfo,
    GoodsList,
  },
  created() {
    //保存传入的iid
    this.iid = this.$route.params.iid;
    // 获取详情页数据
    getDetail(this.iid).then((res) => {
      const data = res.result;
      console.log(data);
      // 获取商品信息
      this.goods = new Goods(
        // 商品信息
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // 获取店铺信息
      this.shopInfo = data.shopInfo;
      // 获取图片信息
      this.detailInfo = data.detailInfo;
      // 获取尺码信息
      this.paramInfo = data.itemParams;
    });
    //获取推荐信息
    getRecommend().then((res) => {
      (this.recommends = res), data.list;
    });
  },
};
</script>

<style scoped>
</style>